<template>
  <div id="app">
    <div class="cube">
      <div class="box1">
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F8375408959%2F640&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669699959&t=a0c7b167aed09859aa6f26f8cc8339d5"
          alt=""
        />
      </div>
      <div class="box2">
       <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F8375408959%2F640&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669699959&t=a0c7b167aed09859aa6f26f8cc8339d5"
          alt=""
        />
      </div>
      <div class="box3">
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F8375408959%2F640&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669699959&t=a0c7b167aed09859aa6f26f8cc8339d5"
          alt=""
        />
      </div>
      <div class="box4">
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F8375408959%2F640&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669699959&t=a0c7b167aed09859aa6f26f8cc8339d5"
          alt=""
        />
      </div>
      <div class="box5">
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20181001%2Fd52b95921a424db6b5ab6e98da329580.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669700193&t=df5b189c85ce8c2ffbc765af82561a27"
          alt=""
        />
      </div>
      <div class="box6">
        <img
          src="https://img2.baidu.com/it/u=1518210580,2735282174&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
/* html {
  perspective: 800px;
} */

.cube {
  width: 200px;
  height: 200px;
  margin: 80px auto;
  /* 设置3D变形效果 */
  transform-style: preserve-3d;
  /* transform:rotateX(45deg) rotateZ(45deg); */
  animation: infinite 20s rotate linear;
  margin-right: 80px;
}

.cube > div {
  width: 200px;
  height: 200px;
  /* 为元素设置为透明效果 */
  opacity: 0.7;
  position: absolute;
}

img {
  vertical-align: top;
  width: 200px;
  height: 200px;
}

.box1 {
  transform: rotateY(90deg) translateZ(100px);
}

.box2 {
  transform: rotateY(-90deg) translateZ(100px);
}

.box3 {
  transform: rotateX(90deg) translateZ(100px);
}

.box4 {
  transform: rotateX(-90deg) translateZ(100px);
}

.box5 {
  transform: rotateX(180deg) translateZ(100px);
}

.box6 {
  transform: rotateX(0deg) translateZ(100px);
}

@keyframes rotate {
  from {
    transform: rotateZ(0) rotateX(0) rotateY(0);
  }

  to {
    transform: rotateZ(360deg) rotateX(360deg) rotateY(360deg);
  }
}
</style>
